<template>
  <view>
    <!-- #ifndef  H5 -->
    <u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent">
      <u-navbar
          :is-back="true"
          :title-bold="true"
          :is-fixed="false"

          title-color="#000000"
          :border-bottom="false"
          back-icon-name="arrow-leftward"
          back-icon-color="#000000"
          :background="{ background: 'rgba(256,256, 256,0)' }"
      ></u-navbar>
    </u-sticky>
    <!-- #endif -->
    <!-- pages/news_details/news_details.wxml -->
    <view class="news-details">
      <view class="header">
        <view class="title xxl mb20">{{ articleDetail.title }}</view>
        <view class="row-end">
          <view class="xs lighter"><u-icon name="clock" size="26" style="margin-right: 5rpx"></u-icon>{{ articleDetail.create_time }}</view>

        </view>
      </view>
      <view class="main">
        <u-parse :html="article_content" :tag-style="tagStyle"/>
      </view>
    </view>
    <loading-view v-if="showLoading"></loading-view>
    <!--<import src="/wxParse/wxParse.wxml"></import>-->
  </view>
</template>

<script>

import {getArticleDetail} from '../../api/new';

export default {
  data() {
    return {
      showLoading: true,
      articleDetail: {},
      article_content: "",
      tagStyle: {
        img: 'width:100%;'
      }
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.type = options.type || '';
    this.id = options.id;

    if (this.type) {
      uni.setNavigationBarTitle({
        title: '帮助详情'
      });
    } else {
      uni.setNavigationBarTitle({
        title: '资讯详情'
      });
    }

    this.getArticleDetailFun();
  },


  methods: {
    getArticleDetailFun() {
      getArticleDetail({
        type: this.type,
        id: this.id
      }).then(res => {
        if (res.code == 1) {
          this.articleDetail = res.data
          //wxParse.wxParse('content', 'html', res.data.content, this, 15)
          setTimeout(() => {
            this.article_content = res.data.content;
          }, 200);
          setTimeout(() => {
            this.showLoading = false
          }, 300);
        }
      });
    }

  }
};
</script>
<style>
/* pages/news_details/news_details.wxss */
page {
  background-color: #f5f9ff;
}
.news-details {
  margin: 0 15px;
  background-color: #fff;
  border-radius: 16rpx;
}

.news-details .header {
  padding: 30rpx 15px;
  border-bottom: var(--border);
}
.news-details .title {

  font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold;
}
.lighter{
  margin-bottom: 10rpx;
}
.news-details .main {
  padding: 40rpx 15px;
}

.wxParse-p image {
  width: 100%;
}
</style>